<template>
  <view class="e-navbar">
    <u-navbar
        :style="{'--titleColor':titleColor}"
        :title="title"
        :bgColor="bgColor"
        :placeholder="placeholder"
        :border="showBorder"
    >
      <view slot="left">
        <view class="flex col-center" @click="handleBack()">
          <u-icon v-if="showBack" name="arrow-left" size="20" :color="titleColor"></u-icon>
          <view v-if="leftTitle" class="left-title" :style="{'--titleColor':titleColor,'color':titleColor + '!important'}">{{ leftTitle }}</view>
        </view>
      </view>
    </u-navbar>
  </view>
</template>

<script>
	export default {
		name:"e-navbar",
		props:{
			title:{
				type:String,
				default: ""
			},
			bgColor:{
				type:String,
				default: "#fff"
			},
			placeholder:{
				type:Boolean,
				default: true
			},
			showBorder: {
				type:Boolean,
				default: false
			},
			showBack:{
				type:Boolean,
				default: true
			},
			titleColor:{
				type: String,
				default: "#333"
			},
      leftTitle:{
        type: String,
        default: ""
      }
		},
		data() {
			return {
				
			};
		},
		methods:{
			// 点击返回
			handleBack() {
				uni.navigateBack();
			},
		},
    options: {
      styleIsolation: 'shared'
    }
	}
</script>

<style lang="scss" scoped>
	.e-navbar{
    /deep/ .u-navbar{
      &__content{
        margin-top: -2rpx;
        &__title, .left-title{
          color: var(--titleColor) !important;
        }
        .left-title{
          font-family: 'pingfang-heavy';
          font-size: 32rpx;
        }
      }
    }
	}
</style>